<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>合皂</title>
    <!--<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <script src="lib/jquery/jquery.min.js"></script>
    <!--<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <!--<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="css/1.css"/>
    <!--<link rel="stylesheet" href="css/hover-min.css" />-->
    <!--<link rel="stylesheet" href="css/animate.css" />-->
    <script>
        $(function () {

            var hz_foot = (function () {
                var dataFoot = [{
                    img: 'image/foot1.jpg',
                    name: '秋水伊人',
                    words: '我是一生渴望被别人收藏，妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来.'
                }, {
                    img: 'image/foot2.jpg',
                    name: '秋水伊人',
                    words: '我是一生渴望被别人收藏，妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来.'
                }, {
                    img: 'image/foot3.jpg',
                    name: '秋水伊人',
                    words: '我是一生渴望被别人收藏，妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来.'
                }, {
                    img: 'image/foot4.jpg',
                    name: '秋水伊人',
                    words: '我是一生渴望被别人收藏，妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来.'
                }, {
                    img: 'image/foot1.jpg',
                    name: '秋水伊人',
                    words: '我是一生渴望被别人收藏，妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来.'
                }, {
                    img: 'image/foot2.jpg',
                    name: '秋水伊人',
                    words: '我是一生渴望被别人收藏，妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来.'
                }, {
                    img: 'image/foot2.jpg',
                    name: '秋水伊人',
                    words: '我是一生渴望被别人收藏，妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来.'
                }];

                var strHtml = $.map(dataFoot, function (v, i) {
                    console.log(v.img);
                    return ' <li class="col-md-3 col-sm-4 col-xs-4 ">' +
                            ' <div><img src=" ' + v.img + '"class="hvr-pulse-shrink" /></div>' +
                            '<h4 >' + v.name + '</h4>' +
                            '<p >' + v.words + '</p> ' +
                            '</li>';
                })
                $('#foot').html(strHtml);
            }());
        });
    </script>
</head>

<body>
<!--头部-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid nav ">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand " href="#"><img src="image/LOGO.png" width="50" class="hvr-bounce-in "/></a>
        </div>
        <div class="collapse navbar-collapse ul1 " id="example-navbar-collapse">
            <ul class="nav navbar-nav fadeInDownBig  animated">
                <li>
                    <a href="#">主页</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href="#">作品展示</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href="#">制皂记</a>
                    <span class="line"></span>
                </li>
                <li>
                    <a href="#">联系我们</a>
                    <span class="line"></span>
                </li>

            </ul>
        </div>
    </div>
</nav>
<!--banner-->
<div id="myCarousel" class="carousel slide  " data-ride="carousel">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="image/banner1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="image/banner2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="image/banner3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->

</div>
<!--welcome-->
<div class="container hz-come">
    <div class="row">
        <h1 class="text-center rubberBand  animated ">欢迎来到"和皂"</h1>
        <p><span>手工皂</span> ，就是我们自己DIY动手做香皂。只需要油脂 、NaOH、水3 种材料。手工皂既可用作洗面，卸妆，又可用作沐浴 用。手工皂的泡沫细腻丰富，能彻底清除毛孔深处的油污
            ，使肌肤滋润光泽，富有弹性。精油皂制作快大多成半透明 状，且 五颜六色非常漂亮；冷制作皂制作周期长，毫不花哨。在这里都是兴趣相投的制皂人，一起 分享，一起交流，一起享受制皂的快乐
        </p>
    </div>
</div>
<!--pro-->
<div class="container hz-pro">
    <div class="row">
        <div class="hz-pro-floor">
            <div class="pull-left w_50"><img src="image/和_r2_c2.jpg"/></div>
            <div class="pull-right w_50 floor-r clearfix">
                <h4>翡翠蕾丝手工皂</h4>
                <ul>
                    <li>制作人：</li>
                    <li>小灰</li>
                    <li>材料:</li>
                    <li>
                        <p>Olitalia EV橄榄油、椰子油、棕榈油、米糠油、酪梨油、乳油木果脂、蓖麻油、NaOH、丝瓜水、低温艾草粉、香茅精油</p>
                    </li>
                    <li>样式：</li>
                    <li>双层</li>
                    <li>制作流程：</li>
                    <li>制作蛋糕体、混合皂土，制作捏花，加装饰</li>
                    <li>样式：</li>
                    <li>双层</li>
                </ul>
                <a href="#">查看更多</a>
                <div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="hz-pro-floor">
            <div class=" pull-right  w_50"><img src="image/和_r2_c2.jpg"/></div>
            <div class="pull-left w_50 floor-r clearfix">
                <h4>翡翠蕾丝手工皂</h4>
                <ul>
                    <li>制作人：</li>
                    <li>小灰</li>
                    <li>材料:</li>
                    <li>
                        <p>Olitalia EV橄榄油、椰子油、棕榈油、米糠油、酪梨油、乳油木果脂、蓖麻油、NaOH、丝瓜水、低温艾草粉、香茅精油</p>
                    </li>
                    <li>样式：</li>
                    <li>双层</li>
                    <li>制作流程：</li>
                    <li>制作蛋糕体、混合皂土,制作捏花,加装饰</li>
                    <li>样式：</li>
                    <li>双层</li>
                </ul>
                <a href="#">查看更多</a>
                <div>
                </div>
            </div>
        </div>

    </div>
</div>
<!--footer-->
<div class="hz-foot container">
    <div class="row clearfix">

        <h3 class="text-center">制皂达人</h3>

        <div class="hz-foot-foolr  ">
            <ul id='foot'>
                <!--<li class="col-md-3 col-sm-4 col-xs-4">
                    <div><img src="image/foot1.jpg" /></div>
                    <h4>小城嘻嘻</h4>
                    <p>我是一生渴望被别人收藏，妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。妥善安放、细心保存。免我惊、免我四下流离，免我无枝可依。但那人，我知，我一直知，他永远不会来。
                    </p>
                </li>-->
            </ul>

        </div>
    </div>

</div>
<!--foot-->
<div class="container-fluid hz-footer">
    <div class="container">
        <div class="row text-center">
            <h4>友情链接</h4>
            <p > <a href="#">世纪家园</a><a href="#">世纪家园</a><a href="#">世纪家园</a><a href="#">世纪家园</a><a href="#">世纪家园</a><a href="#">世纪家园</a><a href="#">世纪家园</a></p>
            <p >© 2016 xxx.com  京ICP备1304xxxx号</p>
        </div>

    </div>
</div>
</body>

</html>